<template>
  <div class="purchase-guide">
    <!-- 顶部banner -->
    <div class="banner">
      <el-image 
        src="https://img.freepik.com/free-photo/wooden-pallets-warehouse_1150-8896.jpg"  
        fit="cover" 
        style="width: 100%; height: 300px;"
      />
      <div class="banner-text">
        <h1>出口包装采购指南</h1>
        <p>专业出口托盘解决方案 · 符合国际标准</p>
      </div>
    </div>
 
    <!-- 免熏蒸托盘 -->
    <div class="knowledge-section">
      <h2><el-icon><Stamp /></el-icon> 免熏蒸托盘知识</h2>
      <el-row :gutter="20">
        <el-col :md="12" :sm="24">
          <el-image 
            src="https://www.epal-pallets.org/fileadmin/_processed_/5/7/csm_EPAL-Euro-pallet_3b9c6f4f5d.jpg"  
            fit="cover"
            style="width: 100%; height: 300px; border-radius: 4px;"
          />
        </el-col>
        <el-col :md="12" :sm="24">
          <div class="text-content">
            <h3>什么是免熏蒸托盘？</h3>
            <p>免熏蒸托盘（Non-fumigation Pallet）是指经过特殊处理，无需进行熏蒸消毒即可直接用于出口的木质包装材料。</p>
            
            <h3>主要特点：</h3>
            <el-divider />
            <ul>
              <li><el-tag type="success">环保材料</el-tag> 采用胶合板、刨花板或经过热处理的原木</li>
              <li><el-tag type="success">国际认证</el-tag> 符合ISPM15国际标准</li>
              <li><el-tag type="success">快速通关</el-tag> 无需熏蒸处理，节省时间和成本</li>
              <li><el-tag type="success">适用范围广</el-tag> 欧美、日韩、澳大利亚等主要贸易国均可使用</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
 
    <!-- 国际托盘标准 -->
    <div class="knowledge-section">
      <h2><el-icon><ScaleToOriginal /></el-icon> 国际托盘标准</h2>
      <el-table :data="standardData" border style="width: 100%; margin-bottom: 20px;">
        <el-table-column prop="type" label="托盘类型" width="180" />
        <el-table-column prop="size" label="标准尺寸(mm)" width="180" />
        <el-table-column prop="weight" label="承重(kg)" width="120" />
        <el-table-column prop="material" label="常用材质" />
        <el-table-column prop="usage" label="主要使用地区" />
      </el-table>
 
      <el-row :gutter="20">
        <el-col :md="8" :sm="24" v-for="(img, index) in standardImages" :key="index">
          <el-card shadow="hover">
            <el-image 
              :src="img.url"  
              fit="cover"
              style="width: 100%; height: 200px;"
            />
            <div style="padding: 10px;">{{ img.desc  }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
 
    <!-- 选购指南 -->
    <div class="knowledge-section">
      <h2><el-icon><ShoppingCart /></el-icon> 托盘选购指南</h2>
      <el-steps direction="vertical" :active="4">
        <el-step title="确定用途">
          <template #description>
            <p>根据货物重量、运输方式和目的地国家选择合适托盘</p>
            <el-image 
              src="https://www.chep.com/content/dam/chep/corporate/images/insights/pallets-types-and-dimensions.jpg"  
              style="width: 100%; max-width: 500px; margin: 10px 0;"
            />
          </template>
        </el-step>
        <el-step title="选择材质">
          <template #description>
            <p>木质、塑料、金属托盘各有优缺点，出口常用免熏蒸复合板</p>
            <el-tag v-for="item in materialTypes" :key="item" style="margin-right: 10px;">{{ item }}</el-tag>
          </template>
        </el-step>
        <el-step title="验证认证">
          <template #description>
            <p>检查IPPC标识（处理方式代码+国家代码+生产企业代码）</p>
            <el-image 
              src="https://www.wood-packaging.com/wp-content/uploads/2019/10/IPPC-Mark.jpg"  
              style="width: 200px; margin: 10px 0;"
            />
          </template>
        </el-step>
        <el-step title="质量检查">
          <template #description>
            <p>检查托盘是否有裂纹、毛刺、钉子突出等问题</p>
            <p>承重测试：静态承重应≥1000kg，动态承重≥500kg</p>
          </template>
        </el-step>
      </el-steps>
    </div>
 
    <!-- 养护知识 -->
    <div class="knowledge-section">
      <h2><el-icon><Tools /></el-icon> 托盘养护知识</h2>
      <el-row :gutter="20">
        <el-col :md="12" :sm="24">
          <el-image 
            src="https://www.palletenterprise.com/ext/resources/Issues/2020/10-October/100120palletrepair.jpg"  
            style="width: 100%; height: 300px; border-radius: 4px;"
          />
        </el-col>
        <el-col :md="12" :sm="24">
          <div class="text-content">
            <h3>日常维护要点</h3>
            <el-divider />
            <ul>
              <li><el-tag type="warning">防潮处理</el-tag> 存放于干燥通风处，避免直接接触地面</li>
              <li><el-tag type="warning">定期检查</el-tag> 每月检查一次，发现损坏及时修复</li>
              <li><el-tag type="warning">清洁方法</el-tag> 使用软毛刷清除灰尘，避免高压水枪冲洗</li>
              <li><el-tag type="warning">堆放规范</el-tag> 叠放不超过5层，重物放底层</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
 
    <!-- 常见问题 -->
    <div class="knowledge-section">
      <h2><el-icon><QuestionFilled /></el-icon> 常见问题解答</h2>
      <el-collapse v-model="activeCollapse">
        <el-collapse-item title="出口托盘必须要有IPPC标识吗？" name="1">
          <div>是的，根据国际植物保护公约(IPPC)规定，所有进出境的木质包装材料必须加施IPPC标识，证明已经过合规处理。</div>
        </el-collapse-item>
        <el-collapse-item title="免熏蒸托盘的使用寿命有多长？" name="2">
          <div>正常使用情况下，胶合板托盘可使用3-5年，实木托盘5-8年。实际寿命取决于使用环境和保养情况。</div>
        </el-collapse-item>
        <el-collapse-item title="如何判断托盘是否适合出口？" name="3">
          <div>三个判断标准：1. 有IPPC标识；2. 材料为热处理木材或胶合板；3. 无树皮、虫孔等检疫风险。</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { 
  Stamp, 
  ScaleToOriginal, 
  ShoppingCart,
  Tools,
  QuestionFilled 
} from '@element-plus/icons-vue'
 
// 托盘标准数据 
const standardData = ref([
  {
    type: '欧标托盘 (EPAL)',
    size: '1200×800×145',
    weight: '1500',
    material: '云杉/松木',
    usage: '欧洲各国'
  },
  {
    type: '美标托盘',
    size: '1200×1000×150',
    weight: '2000',
    material: '橡木/复合板',
    usage: '美洲地区'
  },
  {
    type: '日韩托盘',
    size: '1100×1100×144',
    weight: '1000',
    material: '杉木/胶合板',
    usage: '日本、韩国'
  }
])
 
// 标准图片 
const standardImages = ref([
  {
    url: 'https://www.epal-pallets.org/fileadmin/_processed_/5/7/csm_EPAL-Euro-pallet_3b9c6f4f5d.jpg', 
    desc: '欧标托盘 - 1200×800mm'
  },
  {
    url: 'https://www.palletcentral.com/wp-content/uploads/2020/04/GMA-Pallet.jpg', 
    desc: '美标托盘 - 1200×1000mm'
  },
  {
    url: 'https://sc04.alicdn.com/kf/H1b7e3d2a9d8d4a7d9e1a8f3b5e8d2d8cK.jpg', 
    desc: '日韩托盘 - 1100×1100mm'
  }
])
 
// 材质类型 
const materialTypes = ref([
  '胶合板托盘', 
  '实木托盘', 
  '塑料托盘', 
  '金属托盘', 
  '纸托盘'
])
 
// 折叠面板控制
const activeCollapse = ref(['1'])
</script>
 
<style lang="scss" scoped>
.purchase-guide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .banner {
    position: relative;
    margin-bottom: 30px;
    border-radius: 4px;
    overflow: hidden;
    
    .banner-text {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      color: white;
      
      h1 {
        margin: 0;
        font-size: 28px;
      }
      
      p {
        margin: 5px 0 0;
        font-size: 16px;
      }
    }
  }
  
  .knowledge-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    
    h2 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
      color: var(--el-color-primary);
    }
    
    .text-content {
      padding: 10px;
      
      h3 {
        margin-top: 0;
        color: var(--el-text-color-primary);
      }
      
      ul {
        padding-left: 20px;
        
        li {
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          gap: 10px;
        }
      }
    }
  }
}
 
@media (max-width: 768px) {
  .purchase-guide {
    padding: 10px;
    
    .banner-text {
      h1 {
        font-size: 20px !important;
      }
      
      p {
        font-size: 14px !important;
      }
    }
    
    .knowledge-section {
      padding: 15px;
    }
  }
}
</style>